<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* canvas {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      border-radius: 50%;
    } */
  </style>
</head>

<body>
  <p>
    ·beginPath() ：表示要开始绘制新路径。<br />
    ·moveTo()：起点坐标(x,y)。<br />
    ·lineTo()：从起点坐标到开始绘制一条线，到(x,y)。<br />
    ·rect(x,y,width,height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width和height指定。<br />
    这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。<br />
    ·arc(x,y,r,start,end,flase||true)：以(x,y)为圆心绘制一条弧线，弧线半径为r，起始结束角度<br />
    (用弧线表示)分别为start和end。最后一个参数true和flase是否按逆时针方向计算，(值为true表示按逆时针计算)
  </p>
  <canvas id="canvasWaord" width="400px" height="400px"></canvas>
</body>
<script>
  //一个矩形
  //填充
  // ctx.fill()//默认黑色
  // ctx.fillStyle = 'black'
  // //描边
  // ctx.stroke()//默认黑色
  // ctx.strokeStyle = 'black'
  // ctx.fillRect(10, 10, 50, 50)
  //开始绘制新路径
  // drawElent.beginPath();
  // //把画笔移动到指定坐标
  // drawElent.moveTo(50, 50)
  // //绘制一条从当前位置到指定位置（200，50）的直线
  // 绘制
  // drawElent.stroke()
  window.onload = function () {
    function clock() {
      var elemtCan = document.getElementById('canvasWaord')
      // console.log(elemtCan)
      //确定浏览器支持 canvas 元素
      var drawElent = elemtCan.getContext('2d')
      var x = 200, y = 200; //指定坐标
      var r = 290; //指定钟表半径
      //开始绘制  绘制的是 60个外面的小刻度线

      drawElent.beginPath();
      for (var i = 0; i <= 60; i++) {
        drawElent.moveTo(x, y);
        // 角度 * Π / 180 = 弧度  360/60=6 因为循环的是60
        drawElent.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180)
        drawElent.fillRect(15, 15, 355, 355)
      }
      drawElent.stroke(); // 绘制

      // 绘制的是覆盖 的是里面细长的刻度线 
      drawElent.beginPath();
      drawElent.fillStyle = 'white'
      // r * 0.9 出现标准长度线
      drawElent.fillRect(15, 15, 370, 370)
      //填充
      drawElent.fill()
      var time = new Date()
      var tHous = time.getHours();
      var tMind = time.getMinutes();
      var tSent = time.getSeconds()
      //  -90 ：PI的半径    tHous / 30 ：12个小时 所以360/12
      var thousValue = (-90 + tHous * 30 + tMind / 2) * Math.PI / 180;
      // -90 ：PI的半径    tMind * 6 ： 360/60
      var tmindValue = (-90 + tMind * 6) * Math.PI / 180;
      // -90 ：PI的半径   tSent * 6：360/60
      var tsentValue = (-90 + tSent * 6) * Math.PI / 180;
      //绘制12小时的颜色加深的刻度线
      drawElent.lineWidth = 3;
      drawElent.beginPath();
      for (i = 0; i <= 12; i++) {
        drawElent.moveTo(x, y);
        // 角度 * Π / 180 = 弧度
        drawElent.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180)
      }
      drawElent.stroke(); // 绘制

      // //绘制的是覆盖的是颜色加深的刻度线 
      drawElent.beginPath();
      drawElent.fillStyle = 'white'
      // r * 0.9 出现标准长度线
      // drawElent.arc(x, y, r * 0.9, 0, 2 * Math.PI)
      drawElent.fillRect(20, 20, 355, 355)
      //填充
      drawElent.fill()

      //绘制时钟的时针
      drawElent.lineWidth = 5;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 7 / 20, thousValue, thousValue, false)
      drawElent.stroke();

      //绘制钟表的分针
      drawElent.lineWidth = 3;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 12 / 20, tmindValue, tmindValue, false)
      drawElent.stroke();

      //绘制钟表的秒针
      drawElent.lineWidth = 1;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 18 / 20, tsentValue, tsentValue, false)
      drawElent.stroke();
    }
    setInterval(clock, 1000);
    clock()
  }

</script>

</html>